<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>天才宝宝成长系统 - 原型设计</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <style>
        :root {
            --primary-color: #4CAF50;
            --primary-dark: #388E3C;
            --primary-light: #C8E6C9;
            --secondary-color: #FF9800;
            --text-color: #333333;
            --light-text: #757575;
            --background-color: #F5F5F5;
            --card-background: #FFFFFF;
            --border-color: #E0E0E0;
            --success-color: #4CAF50;
            --warning-color: #FFC107;
            --danger-color: #F44336;
            --shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
            --shadow-hover: 0 8px 16px rgba(0, 0, 0, 0.15);
        }

        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Helvetica Neue', Arial, sans-serif;
            background-color: var(--background-color);
            color: var(--text-color);
            line-height: 1.6;
            padding: 20px;
        }

        h1 {
            text-align: center;
            margin-bottom: 30px;
            color: var(--primary-color);
        }

        h2 {
            margin-bottom: 20px;
            color: var(--primary-dark);
            font-size: 1.5rem;
        }

        .app-container {
            max-width: 1200px;
            margin: 0 auto;
        }

        .grid-container {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
            gap: 30px;
        }

        .prototype-card {
            background-color: var(--card-background);
            border-radius: 10px;
            box-shadow: var(--shadow);
            overflow: hidden;
            transition: transform 0.3s ease, box-shadow 0.3s ease;
        }

        .prototype-card:hover {
            transform: translateY(-5px);
            box-shadow: var(--shadow-hover);
        }

        .card-header {
            background-color: var(--primary-color);
            color: white;
            padding: 15px;
            text-align: center;
            font-weight: bold;
        }

        .phone-frame {
            width: 320px;
            height: 640px;
            border: 16px solid #333;
            border-radius: 40px;
            margin: 0 auto;
            overflow: hidden;
            position: relative;
            background-color: var(--card-background);
            box-shadow: 0 0 0 1px #ddd;
        }

        .phone-status-bar {
            height: 44px;
            background-color: var(--primary-color);
            color: white;
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 0 15px;
            font-size: 12px;
        }

        .phone-content {
            height: calc(100% - 44px);
            overflow-y: auto;
            padding: 16px;
        }

        .phone-footer {
            position: absolute;
            bottom: 0;
            width: 100%;
            height: 60px;
            background-color: white;
            border-top: 1px solid var(--border-color);
            display: flex;
            justify-content: space-around;
            align-items: center;
        }

        .nav-item {
            display: flex;
            flex-direction: column;
            align-items: center;
            color: var(--light-text);
        }

        .nav-item.active {
            color: var(--primary-color);
        }

        .nav-item i {
            font-size: 20px;
            margin-bottom: 4px;
        }

        .nav-item span {
            font-size: 12px;
        }

        /* 通用样式 */
        .header {
            margin-bottom: 20px;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        .header h3 {
            font-size: 18px;
            color: var(--text-color);
        }

        .date-section {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 15px;
            padding: 10px 0;
            border-bottom: 1px solid var(--border-color);
        }

        .current-date {
            font-weight: bold;
            color: var(--text-color);
        }

        .calendar-icon {
            cursor: pointer;
            color: var(--light-text);
            font-size: 18px;
        }

        .calendar-container {
            margin-bottom: 16px;
            padding: 10px;
            background-color: white;
            border-radius: 8px;
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
            display: none;
        }

        .calendar-container.show {
            display: block;
        }

        .month-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 10px;
        }

        .month-header button {
            background: none;
            border: none;
            font-size: 18px;
            cursor: pointer;
            color: var(--light-text);
        }

        .weekly-calendar {
            display: grid;
            grid-template-columns: repeat(7, 1fr);
            gap: 4px;
            margin-bottom: 16px;
        }

        .weekday-label {
            text-align: center;
            font-size: 12px;
            color: var(--light-text);
            margin-bottom: 4px;
        }

        .day-cell {
            aspect-ratio: 1;
            display: flex;
            justify-content: center;
            align-items: center;
            border-radius: 50%;
            font-size: 14px;
            cursor: pointer;
            position: relative;
        }

        .day-cell.today {
            background-color: var(--primary-color);
            color: white;
        }

        .day-cell.today::after {
            content: "今";
            position: absolute;
            top: -4px;
            right: -4px;
            font-size: 10px;
            background-color: var(--secondary-color);
            color: white;
            width: 16px;
            height: 16px;
            border-radius: 50%;
            display: flex;
            justify-content: center;
            align-items: center;
        }

        .day-cell.selected {
            background-color: var(--primary-light);
            color: var(--primary-dark);
            font-weight: bold;
        }

        .task-card {
            background-color: #f8f9fa;
            border-radius: 8px;
            padding: 15px;
            margin-bottom: 10px;
            border-left: 4px solid var(--primary-color);
            display: flex;
            justify-content: space-between;
            align-items: center;
            position: relative;
            overflow: hidden;
            transition: transform 0.3s ease;
        }

        .task-card.completed {
            background-color: var(--primary-light);
            opacity: 0.8;
        }

        .task-info {
            flex: 1;
        }

        .task-title {
            font-weight: bold;
            margin-bottom: 4px;
        }

        .task-time {
            font-size: 12px;
            color: var(--light-text);
        }

        .task-actions {
            display: flex;
            align-items: center;
        }

        .check-in-btn {
            width: 36px;
            height: 36px;
            border-radius: 50%;
            border: 2px solid var(--primary-color);
            background-color: white;
            cursor: pointer;
            display: flex;
            justify-content: center;
            align-items: center;
            color: transparent;
            transition: all 0.3s ease;
        }

        .check-in-btn.checked {
            background-color: var(--primary-color);
            color: white;
        }

        .swipe-actions {
            position: absolute;
            right: -100px;
            top: 0;
            height: 100%;
            display: flex;
            transition: right 0.3s ease;
        }

        .task-card.swipe-left .swipe-actions {
            right: 0;
        }

        .edit-btn, .delete-btn {
            width: 50px;
            border: none;
            color: white;
            cursor: pointer;
            display: flex;
            justify-content: center;
            align-items: center;
        }

        .edit-btn {
            background-color: var(--secondary-color);
        }

        .delete-btn {
            background-color: var(--danger-color);
        }

        .add-button {
            position: absolute;
            bottom: 80px;
            right: 20px;
            width: 56px;
            height: 56px;
            border-radius: 50%;
            background-color: var(--primary-color);
            color: white;
            border: none;
            font-size: 24px;
            display: flex;
            justify-content: center;
            align-items: center;
            cursor: pointer;
            box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
        }

        .badge {
            display: inline-block;
            padding: 2px 8px;
            border-radius: 12px;
            font-size: 12px;
            margin-left: 8px;
        }

        .badge-primary {
            background-color: var(--primary-light);
            color: var(--primary-dark);
        }

        .badge-secondary {
            background-color: #FFF3E0;
            color: var(--secondary-color);
        }

        /* 其他界面样式 */
        .form-group {
            margin-bottom: 16px;
        }

        .form-group label {
            display: block;
            margin-bottom: 8px;
            font-weight: 500;
        }

        .form-group input,
        .form-group textarea,
        .form-group select {
            width: 100%;
            padding: 10px;
            border: 1px solid var(--border-color);
            border-radius: 4px;
            font-size: 16px;
        }

        .form-group textarea {
            height: 100px;
            resize: none;
        }

        .checkbox-group {
            display: flex;
            align-items: center;
            margin-bottom: 16px;
        }

        .checkbox-group input {
            margin-right: 10px;
        }

        .button-group {
            display: flex;
            justify-content: space-between;
            margin-top: 24px;
        }

        .btn {
            padding: 10px 20px;
            border: none;
            border-radius: 4px;
            font-size: 16px;
            cursor: pointer;
            transition: background-color 0.3s;
        }

        .btn-primary {
            background-color: var(--primary-color);
            color: white;
        }

        .btn-primary:hover {
            background-color: var(--primary-dark);
        }

        .btn-secondary {
            background-color: var(--border-color);
            color: var(--text-color);
        }

        .btn-danger {
            background-color: var(--danger-color);
            color: white;
        }

        .chat-container {
            height: calc(100% - 60px);
            display: flex;
            flex-direction: column;
        }

        .chat-messages {
            flex: 1;
            overflow-y: auto;
            margin-bottom: 16px;
        }

        .message {
            margin-bottom: 16px;
            max-width: 70%;
        }

        .message.user {
            margin-left: auto;
        }

        .message-content {
            padding: 12px 16px;
            border-radius: 18px;
            word-wrap: break-word;
        }

        .message.user .message-content {
            background-color: var(--primary-color);
            color: white;
            border-bottom-right-radius: 4px;
        }

        .message.system .message-content {
            background-color: #f1f1f1;
            border-bottom-left-radius: 4px;
        }

        .chat-input {
            display: flex;
            gap: 8px;
        }

        .chat-input input {
            flex: 1;
            padding: 10px;
            border: 1px solid var(--border-color);
            border-radius: 20px;
        }

        .chat-input button {
            width: 40px;
            height: 40px;
            border-radius: 50%;
            background-color: var(--primary-color);
            color: white;
            border: none;
            cursor: pointer;
            display: flex;
            justify-content: center;
            align-items: center;
        }

        .setting-item {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 16px 0;
            border-bottom: 1px solid var(--border-color);
        }

        .setting-item .label {
            font-weight: 500;
        }

        .setting-item .value {
            color: var(--light-text);
        }

        /* 响应式调整 */
        @media (max-width: 768px) {
            .grid-container {
                grid-template-columns: 1fr;
            }
        }
    </style>
</head>
<body>
    <div class="app-container">
        <h1>天才宝宝成长系统 - 原型设计</h1>
        <div class="grid-container">
            <!-- 主界面 - 合并后的任务视图 -->
            <div class="prototype-card">
                <div class="card-header">主界面 - 任务视图</div>
                <div class="phone-frame">
                    <div class="phone-status-bar">
                        <span>9:41</span>
                        <div>
                            <i class="fas fa-signal"></i>
                            <i class="fas fa-wifi"></i>
                            <i class="fas fa-battery-three-quarters"></i>
                        </div>
                    </div>
                    <div class="phone-content">
                        <div class="header">
                            <h3>任务</h3>
                            <i class="fas fa-search"></i>
                        </div>
                        
                        <!-- 日期部分 -->
                        <div class="date-section">
                            <span class="current-date">4月15日 星期六</span>
                            <i class="fas fa-calendar-alt calendar-icon"></i>
                        </div>
                        
                        <!-- 月视图日历 -->
                        <div class="calendar-container">
                            <div class="month-header">
                                <button><i class="fas fa-chevron-left"></i></button>
                                <span>2023年4月</span>
                                <button><i class="fas fa-chevron-right"></i></button>
                            </div>
                            <div class="weekday-label">
                                <div>日</div>
                                <div>一</div>
                                <div>二</div>
                                <div>三</div>
                                <div>四</div>
                                <div>五</div>
                                <div>六</div>
                            </div>
                            <div class="weekly-calendar">
                                <div class="day-cell">26</div>
                                <div class="day-cell">27</div>
                                <div class="day-cell">28</div>
                                <div class="day-cell">29</div>
                                <div class="day-cell">30</div>
                                <div class="day-cell">31</div>
                                <div class="day-cell">1</div>
                            </div>
                            <div class="weekly-calendar">
                                <div class="day-cell">2</div>
                                <div class="day-cell">3</div>
                                <div class="day-cell">4</div>
                                <div class="day-cell">5</div>
                                <div class="day-cell">6</div>
                                <div class="day-cell">7</div>
                                <div class="day-cell">8</div>
                            </div>
                            <div class="weekly-calendar">
                                <div class="day-cell">9</div>
                                <div class="day-cell">10</div>
                                <div class="day-cell">11</div>
                                <div class="day-cell">12</div>
                                <div class="day-cell">13</div>
                                <div class="day-cell">14</div>
                                <div class="day-cell">15</div>
                            </div>
                            <div class="weekly-calendar">
                                <div class="day-cell today selected">16</div>
                                <div class="day-cell">17</div>
                                <div class="day-cell">18</div>
                                <div class="day-cell">19</div>
                                <div class="day-cell">20</div>
                                <div class="day-cell">21</div>
                                <div class="day-cell">22</div>
                            </div>
                        </div>
                        
                        <!-- 周视图选择器 -->
                        <div class="weekly-calendar">
                            <div class="day-cell">一</div>
                            <div class="day-cell">二</div>
                            <div class="day-cell">三</div>
                            <div class="day-cell">四</div>
                            <div class="day-cell">五</div>
                            <div class="day-cell">六</div>
                            <div class="day-cell today selected">日</div>
                        </div>
                        
                        <!-- 任务列表 -->
                        <div class="task-list">
                            <div class="task-card" draggable="true">
                                <div class="task-info">
                                    <div class="task-title">英语单词学习 <span class="badge badge-primary">10分钟</span></div>
                                    <div class="task-meta">
                                        <span class="task-time">09:00 - 09:10</span>
                                        <span class="task-type recurring"><i class="fas fa-calendar-repeat"></i> 每周</span>
                                    </div>
                                </div>
                                <div class="task-actions">
                                    <button class="check-in-btn"><i class="fas fa-check"></i></button>
                                </div>
                                <div class="swipe-actions">
                                    <button class="edit-btn"><i class="fas fa-edit"></i></button>
                                    <button class="delete-btn"><i class="fas fa-trash"></i></button>
                                </div>
                            </div>
                             
                            <div class="task-card" draggable="true">
                                <div class="task-info">
                                    <div class="task-title">数学练习 <span class="badge badge-secondary">20分钟</span></div>
                                    <div class="task-meta">
                                        <span class="task-time">14:30 - 14:50</span>
                                        <span class="task-type recurring"><i class="fas fa-calendar-repeat"></i> 工作日</span>
                                    </div>
                                </div>
                                <div class="task-actions">
                                    <button class="check-in-btn"><i class="fas fa-check"></i></button>
                                </div>
                                <div class="swipe-actions">
                                    <button class="edit-btn"><i class="fas fa-edit"></i></button>
                                    <button class="delete-btn"><i class="fas fa-trash"></i></button>
                                </div>
                            </div>
                             
                            <div class="task-card completed" draggable="true">
                                <div class="task-info">
                                    <div class="task-title">阅读故事书 <span class="badge badge-primary">15分钟</span></div>
                                    <div class="task-meta">
                                        <span class="task-time">08:00 - 08:15</span>
                                        <span class="task-type recurring"><i class="fas fa-calendar-repeat"></i> 每天</span>
                                    </div>
                                </div>
                                <div class="task-actions">
                                    <button class="check-in-btn checked"><i class="fas fa-check"></i></button>
                                </div>
                                <div class="swipe-actions">
                                    <button class="edit-btn"><i class="fas fa-edit"></i></button>
                                    <button class="delete-btn"><i class="fas fa-trash"></i></button>
                                </div>
                            </div>
                             
                            <div class="task-card" draggable="true">
                                <div class="task-info">
                                    <div class="task-title">户外活动 <span class="badge badge-secondary">30分钟</span></div>
                                    <div class="task-meta">
                                        <span class="task-time">16:00 - 16:30</span>
                                        <span class="task-type one-time"><i class="fas fa-calendar-day"></i> 一次性</span>
                                    </div>
                                </div>
                                <div class="task-actions">
                                    <button class="check-in-btn"><i class="fas fa-check"></i></button>
                                </div>
                                <div class="swipe-actions">
                                    <button class="edit-btn"><i class="fas fa-edit"></i></button>
                                    <button class="delete-btn"><i class="fas fa-trash"></i></button>
                                </div>
                            </div>
                        </div>
                        
                        <!-- 添加任务按钮 -->
                        <button class="add-button">
                            <i class="fas fa-plus"></i>
                        </button>
                    </div>
                    <div class="phone-footer">
                        <div class="nav-item active">
                            <i class="fas fa-tasks"></i>
                            <span>任务</span>
                        </div>
                        <div class="nav-item">
                            <i class="fas fa-comment"></i>
                            <span>沟通</span>
                        </div>
                        <div class="nav-item">
                            <i class="fas fa-chart-line"></i>
                            <span>统计</span>
                        </div>
                        <div class="nav-item">
                            <i class="fas fa-cog"></i>
                            <span>设置</span>
                        </div>
                    </div>
                </div>
            </div>

            <!-- 添加任务界面 -->
            <div class="prototype-card">
                <div class="card-header">添加任务</div>
                <div class="phone-frame">
                    <div class="phone-status-bar">
                        <span>9:41</span>
                        <div>
                            <i class="fas fa-signal"></i>
                            <i class="fas fa-wifi"></i>
                            <i class="fas fa-battery-three-quarters"></i>
                        </div>
                    </div>
                    <div class="phone-content">
                        <div class="header">
                            <h3>添加新任务</h3>
                            <button class="btn btn-secondary" style="padding: 5px 10px; font-size: 14px;">取消</button>
                        </div>
                        <form>
                            <div class="form-group">
                                <label for="task-title">任务名称</label>
                                <input type="text" id="task-title" placeholder="输入任务名称">
                            </div>
                            <div class="form-group">
                                <label for="task-description">任务描述</label>
                                <textarea id="task-description" placeholder="输入任务描述"></textarea>
                            </div>
                            <div class="form-group">
                                <label for="task-time">开始时间</label>
                                <input type="time" id="task-time">
                            </div>
                            <div class="form-group">
                                <label for="task-duration">持续时间</label>
                                <input type="number" id="task-duration" placeholder="分钟" min="1">
                            </div>
                            <div class="checkbox-group">
                                <input type="checkbox" id="is-recurring">
                                <label for="is-recurring">周期性任务</label>
                            </div>
                            <div class="form-group" style="display: none;">
                                <label for="recurrence-pattern">重复模式</label>
                                <select id="recurrence-pattern">
                                    <option value="daily">每天</option>
                                    <option value="weekly">每周</option>
                                    <option value="workdays">工作日</option>
                                </select>
                            </div>
                            <div class="checkbox-group">
                                <input type="checkbox" id="skip-holidays">
                                <label for="skip-holidays">避开节假日</label>
                            </div>
                            <div class="button-group">
                                <button type="button" class="btn btn-secondary">保存为草稿</button>
                                <button type="submit" class="btn btn-primary">添加任务</button>
                            </div>
                        </form>
                    </div>
                </div>
            </div>

            <!-- 编辑任务界面 -->
            <div class="prototype-card">
                <div class="card-header">编辑任务</div>
                <div class="phone-frame">
                    <div class="phone-status-bar">
                        <span>9:41</span>
                        <div>
                            <i class="fas fa-signal"></i>
                            <i class="fas fa-wifi"></i>
                            <i class="fas fa-battery-three-quarters"></i>
                        </div>
                    </div>
                    <div class="phone-content">
                        <div class="header">
                            <h3>编辑任务</h3>
                            <button class="btn btn-danger" style="padding: 5px 10px; font-size: 14px; background-color: var(--danger-color);">删除</button>
                        </div>
                        <form>
                            <div class="form-group">
                                <label for="edit-task-title">任务名称</label>
                                <input type="text" id="edit-task-title" value="英语单词学习">
                            </div>
                            <div class="form-group">
                                <label for="edit-task-description">任务描述</label>
                                <textarea id="edit-task-description">学习10个新单词，复习20个旧单词</textarea>
                            </div>
                            <div class="form-group">
                                <label for="edit-task-time">开始时间</label>
                                <input type="time" id="edit-task-time" value="09:00">
                            </div>
                            <div class="form-group">
                                <label for="edit-task-duration">持续时间</label>
                                <input type="number" id="edit-task-duration" value="10" min="1">
                            </div>
                            <div class="checkbox-group">
                                <input type="checkbox" id="edit-is-recurring" checked>
                                <label for="edit-is-recurring">周期性任务</label>
                            </div>
                            <div class="form-group">
                                <label for="edit-recurrence-pattern">重复模式</label>
                                <select id="edit-recurrence-pattern">
                                    <option value="daily">每天</option>
                                    <option value="weekly" selected>每周</option>
                                    <option value="workdays">工作日</option>
                                </select>
                            </div>
                            <div class="checkbox-group">
                                <input type="checkbox" id="edit-skip-holidays" checked>
                                <label for="edit-skip-holidays">避开节假日</label>
                            </div>
                            <div class="button-group">
                                <button type="button" class="btn btn-secondary">取消</button>
                                <button type="submit" class="btn btn-primary">保存更改</button>
                            </div>
                        </form>
                    </div>
                </div>
            </div>

            <!-- 沟通界面 -->
            <div class="prototype-card">
                <div class="card-header">沟通界面</div>
                <div class="phone-frame">
                    <div class="phone-status-bar">
                        <span>9:41</span>
                        <div>
                            <i class="fas fa-signal"></i>
                            <i class="fas fa-wifi"></i>
                            <i class="fas fa-battery-three-quarters"></i>
                        </div>
                    </div>
                    <div class="phone-content">
                        <div class="header">
                            <h3>成长助手</h3>
                            <i class="fas fa-ellipsis-v"></i>
                        </div>
                        <div class="chat-container">
                            <div class="chat-messages">
                                <div class="message system">
                                    <div class="message-content">
                                        你好！我是你的成长助手，有什么可以帮助你的吗？
                                    </div>
                                </div>
                                <div class="message user">
                                    <div class="message-content">
                                        我想为孩子安排下周的学习任务
                                    </div>
                                </div>
                                <div class="message system">
                                    <div class="message-content">
                                        没问题！我可以帮你设计一个适合孩子年龄和学习进度的学习计划。能告诉我孩子的年龄和当前的学习情况吗？
                                    </div>
                                </div>
                                <div class="message user">
                                    <div class="message-content">
                                        孩子6岁，正在学习英语和数学基础
                                    </div>
                                </div>
                                <div class="message system">
                                    <div class="message-content">
                                        了解了！对于6岁的孩子，我建议每天安排20-30分钟的学习时间，包括10分钟英语和10分钟数学。我可以为你生成一个周计划，你觉得合适吗？
                                    </div>
                                </div>
                            </div>
                            <div class="chat-input">
                                <input type="text" placeholder="输入消息...">
                                <button>
                                    <i class="fas fa-paper-plane"></i>
                                </button>
                            </div>
                        </div>
                    </div>
                    <div class="phone-footer">
                        <div class="nav-item">
                            <i class="fas fa-tasks"></i>
                            <span>任务</span>
                        </div>
                        <div class="nav-item active">
                            <i class="fas fa-comment"></i>
                            <span>沟通</span>
                        </div>
                        <div class="nav-item">
                            <i class="fas fa-chart-line"></i>
                            <span>统计</span>
                        </div>
                        <div class="nav-item">
                            <i class="fas fa-cog"></i>
                            <span>设置</span>
                        </div>
                    </div>
                </div>
            </div>

            <!-- 设置界面 -->
            <div class="prototype-card">
                <div class="card-header">设置界面</div>
                <div class="phone-frame">
                    <div class="phone-status-bar">
                        <span>9:41</span>
                        <div>
                            <i class="fas fa-signal"></i>
                            <i class="fas fa-wifi"></i>
                            <i class="fas fa-battery-three-quarters"></i>
                        </div>
                    </div>
                    <div class="phone-content">
                        <div class="header">
                            <h3>设置</h3>
                            <i class="fas fa-search"></i>
                        </div>
                        <div class="setting-item">
                            <span class="label">API Key</span>
                            <span class="value">••••••••••••</span>
                        </div>
                        <div class="setting-item">
                            <span class="label">每日提醒时间</span>
                            <span class="value">08:00</span>
                        </div>
                        <div class="setting-item">
                            <span class="label">主题</span>
                            <span class="value">浅色</span>
                        </div>
                        <div class="setting-item">
                            <span class="label">语言</span>
                            <span class="value">简体中文</span>
                        </div>
                        <div class="setting-item">
                            <span class="label">通知设置</span>
                            <span class="value">已开启</span>
                        </div>
                        <div class="setting-item">
                            <span class="label">数据同步</span>
                            <span class="value">Wi-Fi下自动同步</span>
                        </div>
                        <div class="setting-item">
                            <span class="label">关于我们</span>
                            <i class="fas fa-chevron-right"></i>
                        </div>
                        <div class="setting-item">
                            <span class="label">帮助与反馈</span>
                            <i class="fas fa-chevron-right"></i>
                        </div>
                        <div style="margin-top: 30px;">
                            <button class="btn btn-danger" style="width: 100%; background-color: var(--danger-color);">
                                退出登录
                            </button>
                        </div>
                    </div>
                    <div class="phone-footer">
                        <div class="nav-item">
                            <i class="fas fa-tasks"></i>
                            <span>任务</span>
                        </div>
                        <div class="nav-item">
                            <i class="fas fa-comment"></i>
                            <span>沟通</span>
                        </div>
                        <div class="nav-item">
                            <i class="fas fa-chart-line"></i>
                            <span>统计</span>
                        </div>
                        <div class="nav-item active">
                            <i class="fas fa-cog"></i>
                            <span>设置</span>
                        </div>
                    </div>
                </div>
            </div>

            <!-- API Key 设置界面 -->
            <div class="prototype-card">
                <div class="card-header">API Key 设置</div>
                <div class="phone-frame">
                    <div class="phone-status-bar">
                        <span>9:41</span>
                        <div>
                            <i class="fas fa-signal"></i>
                            <i class="fas fa-wifi"></i>
                            <i class="fas fa-battery-three-quarters"></i>
                        </div>
                    </div>
                    <div class="phone-content">
                        <div class="header">
                            <button class="btn btn-secondary" style="padding: 5px 10px; font-size: 14px;"><i class="fas fa-arrow-left"></i></button>
                            <h3>API Key 设置</h3>
                            <span style="width: 80px;"></span>
                        </div>
                        <div style="margin-top: 20px;">
                            <div class="form-group">
                                <label for="api-key">API Key</label>
                                <input type="password" id="api-key" placeholder="输入您的API Key" value="sk-1234567890abcdefghijklmnopqrstuv">
                            </div>
                            <div style="margin-top: 16px; padding: 12px; background-color: var(--primary-light); border-radius: 4px; font-size: 14px;">
                                <p><i class="fas fa-info-circle"></i> API Key用于连接成长系统服务，获取智能学习推荐。</p>
                            </div>
                            <div style="margin-top: 16px; padding: 12px; background-color: #FFF3E0; border-radius: 4px; font-size: 14px;">
                                <p><i class="fas fa-exclamation-triangle"></i> 请妥善保管您的API Key，不要分享给他人。</p>
                            </div>
                            <div class="button-group">
                                <button type="button" class="btn btn-secondary">取消</button>
                                <button type="button" class="btn btn-primary">保存</button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- 任务统计界面 -->
            <div class="prototype-card">
                <div class="card-header">任务统计</div>
                <div class="phone-frame">
                    <div class="phone-status-bar">
                        <span>9:41</span>
                        <div>
                            <i class="fas fa-signal"></i>
                            <i class="fas fa-wifi"></i>
                            <i class="fas fa-battery-three-quarters"></i>
                        </div>
                    </div>
                    <div class="phone-content">
                        <div class="header">
                            <h3>学习统计</h3>
                            <select style="padding: 5px; font-size: 14px;">
                                <option>本周</option>
                                <option>本月</option>
                                <option>全部</option>
                            </select>
                        </div>
                        <div style="margin-top: 20px; display: flex; justify-content: space-around; margin-bottom: 20px;">
                            <div style="text-align: center;">
                                <div style="font-size: 24px; font-weight: bold; color: var(--primary-color);">18</div>
                                <div style="font-size: 14px; color: var(--light-text);">已完成任务</div>
                            </div>
                            <div style="text-align: center;">
                                <div style="font-size: 24px; font-weight: bold; color: var(--secondary-color);">3</div>
                                <div style="font-size: 14px; color: var(--light-text);">未完成任务</div>
                            </div>
                            <div style="text-align: center;">
                                <div style="font-size: 24px; font-weight: bold; color: var(--primary-dark);">86%</div>
                                <div style="font-size: 14px; color: var(--light-text);">完成率</div>
                            </div>
                        </div>
                        <div style="height: 180px; background-color: #f8f9fa; border-radius: 8px; margin-bottom: 20px; display: flex; align-items: flex-end; justify-content: space-around; padding: 10px;">
                            <div style="width: 30px; background-color: var(--primary-color); border-radius: 4px 4px 0 0; height: 60%;"></div>
                            <div style="width: 30px; background-color: var(--primary-color); border-radius: 4px 4px 0 0; height: 40%;"></div>
                            <div style="width: 30px; background-color: var(--primary-color); border-radius: 4px 4px 0 0; height: 80%;"></div>
                            <div style="width: 30px; background-color: var(--primary-color); border-radius: 4px 4px 0 0; height: 50%;"></div>
                            <div style="width: 30px; background-color: var(--primary-color); border-radius: 4px 4px 0 0; height: 70%;"></div>
                            <div style="width: 30px; background-color: var(--primary-color); border-radius: 4px 4px 0 0; height: 90%;"></div>
                            <div style="width: 30px; background-color: var(--secondary-color); border-radius: 4px 4px 0 0; height: 30%;"></div>
                        </div>
                        <div style="font-size: 14px; color: var(--light-text); text-align: center; margin-bottom: 10px;">
                            每日完成任务数量
                        </div>
                        <div style="display: flex; justify-content: space-around; font-size: 12px; color: var(--light-text);">
                            <span>一</span>
                            <span>二</span>
                            <span>三</span>
                            <span>四</span>
                            <span>五</span>
                            <span>六</span>
                            <span>日</span>
                        </div>
                    </div>
                    <div class="phone-footer">
                        <div class="nav-item">
                            <i class="fas fa-tasks"></i>
                            <span>任务</span>
                        </div>
                        <div class="nav-item">
                            <i class="fas fa-comment"></i>
                            <span>沟通</span>
                        </div>
                        <div class="nav-item active">
                            <i class="fas fa-chart-line"></i>
                            <span>统计</span>
                        </div>
                        <div class="nav-item">
                            <i class="fas fa-cog"></i>
                            <span>设置</span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <script>
        // 简单的交互效果
        document.addEventListener('DOMContentLoaded', function() {
            // 日历显示/隐藏
            const calendarIcon = document.querySelector('.calendar-icon');
            const calendarContainer = document.querySelector('.calendar-container');
            
            calendarIcon.addEventListener('click', function() {
                calendarContainer.classList.toggle('show');
            });
            
            // 日期选择
            const dayCells = document.querySelectorAll('.day-cell');
            const currentDateElement = document.querySelector('.current-date');
            const weekdays = ['日', '一', '二', '三', '四', '五', '六'];
            
            dayCells.forEach(cell => {
                cell.addEventListener('click', function() {
                    // 移除所有选中状态，但保留今日标记
                    document.querySelectorAll('.day-cell.selected').forEach(c => {
                        if (!c.classList.contains('today')) {
                            c.classList.remove('selected');
                        }
                    });
                    
                    // 添加选中状态
                    this.classList.add('selected');
                    
                    // 更新当前日期显示
                    if (this.textContent && !isNaN(parseInt(this.textContent))) {
                        const day = parseInt(this.textContent);
                        const date = new Date();
                        date.setDate(day);
                        const month = date.getMonth() + 1;
                        const weekday = weekdays[date.getDay()];
                        currentDateElement.textContent = `${month}月${day}日 星期${weekday}`;
                    }
                });
            });
            
            // 任务打卡功能
            const checkInButtons = document.querySelectorAll('.check-in-btn');
            
            checkInButtons.forEach(button => {
                button.addEventListener('click', function() {
                    this.classList.toggle('checked');
                    const taskCard = this.closest('.task-card');
                    taskCard.classList.toggle('completed');
                });
            });
            
            // 任务左滑显示编辑和删除按钮
            const taskCards = document.querySelectorAll('.task-card');
            let startX, moveX;
            let currentCard = null;
            
            taskCards.forEach(card => {
                card.addEventListener('touchstart', function(e) {
                    startX = e.touches[0].clientX;
                    currentCard = this;
                });
                
                card.addEventListener('touchmove', function(e) {
                    if (!currentCard) return;
                    
                    moveX = e.touches[0].clientX;
                    const diffX = moveX - startX;
                    
                    // 只有向左滑动且超过50px才显示操作按钮
                    if (diffX < -50) {
                        this.classList.add('swipe-left');
                    } else if (diffX > 50) {
                        this.classList.remove('swipe-left');
                    }
                });
                
                card.addEventListener('touchend', function() {
                    currentCard = null;
                });
                
                // 点击卡片其他区域关闭操作按钮
                card.addEventListener('click', function(e) {
                    if (!e.target.closest('.swipe-actions') && !e.target.closest('.check-in-btn')) {
                        this.classList.remove('swipe-left');
                    }
                });
            });
            
            // 编辑和删除按钮事件
            const editButtons = document.querySelectorAll('.edit-btn');
            const deleteButtons = document.querySelectorAll('.delete-btn');
            
            editButtons.forEach(button => {
                button.addEventListener('click', function(e) {
                    e.stopPropagation();
                    // 这里可以添加编辑任务的逻辑
                    alert('编辑任务');
                });
            });
            
            deleteButtons.forEach(button => {
                button.addEventListener('click', function(e) {
                    e.stopPropagation();
                    // 这里可以添加删除任务的逻辑
                    if (confirm('确定要删除这个任务吗？')) {
                        const taskCard = this.closest('.task-card');
                        taskCard.style.height = taskCard.offsetHeight + 'px';
                        setTimeout(() => {
                            taskCard.style.height = '0';
                            taskCard.style.marginBottom = '0';
                            taskCard.style.padding = '0';
                            taskCard.style.overflow = 'hidden';
                            taskCard.style.transition = 'all 0.3s ease';
                        }, 10);
                        setTimeout(() => {
                            taskCard.remove();
                        }, 300);
                    }
                });
            });
            
            // 周期性任务显示逻辑
            const recurringCheckboxes = document.querySelectorAll('#is-recurring, #edit-is-recurring');
            recurringCheckboxes.forEach(checkbox => {
                checkbox.addEventListener('change', function() {
                    const patternSelect = this.id === 'is-recurring' ? 
                        document.querySelector('#recurrence-pattern').parentElement : 
                        document.querySelector('#edit-recurrence-pattern').parentElement;
                    patternSelect.style.display = this.checked ? 'block' : 'none';
                });
            });
        });
    </script>
</body>
</html>